<template>
  <div class="order-detail">
    <div class="order-box">
      <div class="order-item">
        <div class="order-title">商品订单：</div>
        <div class="order-num">JAXT73569827509709759720</div>
      </div>
      <div class="order-item">
        <div class="order-title">支付金额：</div>
        <div class="order-price">￥39.9</div>
      </div>
      <div class="order-item">
        <div class="order-title">商品名称：</div>
        <div class="order-name">科一科四技巧答案（图表学习法全套解析）</div>
      </div>
      <div class="order-item">
        <div class="order-title">购买时间：</div>
        <div class="order-time">2023-05-20 12:30:56</div>
      </div>
      <div class="buy-box">
        <div class="order-title">支付方式：</div>
        <div class="buy-type">
          <div class="type-item">
            <img src="../../assets/wechat.png" alt="" />
            <div>微信支付</div>
            <img class="right" src="../../assets/gou.png" alt="" />
          </div>
        </div>

        <div class="pay-code">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "OrderDetail",
};
</script>

<style lang="scss">
.order-box {
  margin: 2% 12.5%;
  background-color: #fff;
  border-radius: 10px;
  padding: 2vh 4vw;

  .order-item {
    display: flex;
    align-items: center;
    padding: 1vh 0;

    .order-title {
      font-weight: bold;
    }

    .order-num,
    .order-time {
      color: #999999;
    }

    .order-price {
      color: #2ac092;
      font-size: 1.2vw;
    }
  }

  .buy-box {
    padding: 1vh 0;

    .order-title {
      font-weight: bold;
      margin-bottom: 2vh;
    }

    .buy-type {
      .type-item {
        position: relative;
        display: flex;
        padding: 0.8vh 1.5vw;
        border-radius: 5px;
        border: 1px solid #2ac092;
        width: max-content;
        cursor: pointer;

        .right {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 1.2vw;
          height: 2vh;
        }
      }
    }
  }
}
</style>